<template>
  <div class="song_info">
    <ul>
      <li>
        <div class="index"></div>
        <div class="song ">歌曲</div>
        <div class="singer" v-show="showSinger">歌手</div>
        <div class="album" v-show="showAlbum">专辑</div>
        <div class="time">时长</div>
      </li>
      <li v-for="(item,index) in currentList">
        <div class="index">
          <span>{{index+1}}</span>
        </div>
        <div class="song">
          <span class="songName" @click="getSong(item.song_mid,item.song_id)">{{item.song_name}}</span>
          <span class="is_mv" v-show="item.mv_mid">MV</span>
          <span class="is_only" v-show="item.isonly">独家</span>
          <div class="more">
            <span class="iconfont icon-bofangsanjiaoxing"></span>
            <span class="iconfont icon-jia"></span>
            <span class="iconfont icon-xiazai"></span>
            <span class="iconfont icon-zhuanfa"></span>
          </div>
        </div>
        <div class="singer ellipsis" v-show="showSinger">
                <span v-for="(singer,index) in item.singers" :key="index" @click="toSingerDetail(singer.mid)">
                  {{singer.name}}
                  <span>
                    {{index===item.singers.length-1?'':'/'}}
                  </span>
                </span>
        </div>
        <div class="album ellipsis" v-show="showAlbum" @click="toAlbumDetail(item.album_mid,item.album_id)">{{item.album_name}}</div>
        <div class="time">{{item.interval_str}}</div>
      </li>
    </ul>
    <div class="loading-more" @click="loadingMore" v-show="showButton&&listLength>10">点击加载更多</div>
  </div>
</template>

<script>
  import {mapState} from 'vuex'
  export default {
        name: "SongList",
        props:{
          list:Array,
          showAlbum:Boolean,
          showSinger:Boolean
        },
        data(){
          return{
            currentList:[],
            showButton:true,
            listLength:0
          }
        },
        methods:{
          loadingMore(){
            let count=1;
            for(let i=this.currentList.length;i<this.currentList.length+10;i++){
                if(this.currentList.length!==this.list.length){
                  this.currentList.push(this.list[i]);
                  if(count!==10){
                    count++;
                  }else{
                    return;
                  }
                }else{
                  this.showButton=false;
                }
            }
          },
          toSingerDetail(mid){
            this.$router.replace(`/singerdetail/${mid}`);
          },
          getSong(song_mid,song_id){
            this.$router.replace({path:'/songDetail',query:{song_mid,song_id}})
          },
          toAlbumDetail(mid,id){
            // console.log(id);
            this.$router.replace({path:`/albumdetail/${mid}/${id}`});
          },
        },
        watch:{
          list(value){
            this.listLength=value.length;
            for(let i=0;i<this.list.length;i++){
              if(i!==10){
                this.currentList.push(value[i]);
              }else{
                return;
              }
            }
          }
        }


    }
</script>

<style scoped lang="less">
.song_info{
  float: left;
  width: 100%;
  margin-top: 30px;
  >ul{
    >li{
      height: 60px;
      line-height: 60px;
      text-align: left;
      font-size: 14px;
      display: flex;
      flex-direction: row;
      .index{
        width: 5%;
        padding: 0px 15px;
        box-sizing: border-box;
      }
      .song{
        width: 54%;
        position: relative;
        margin-right: 10px;
        >span:nth-child(n+2){
          border: 1px solid #31c27c;
          color: #31c27c;
          margin: 0 4px;
          padding: 0 6px;
          border-radius: 5px;
          font-size: 12px;
        }
        .more{
          position: absolute;
          top:0;
          bottom: 0;
          margin: auto 0;
          right: 10px;
          opacity: 0;
          &:hover{
            opacity: 1;
          }
          >span{
            display: inline-block;
            width: 35px;
            height: 35px;
            border: 1px solid #d4d4d4;
            text-align: center;
            line-height: 35px;
            border-radius: 50%;
            color: #999;
            margin-right: 5px;
            background: white;
            &:hover{
              border-color: #31c27c;
              color: #31c27c;
            }
          }
        }
      }
      .singer{
        width: 20%;
        padding-right: 10px;

      }
      .album{
        width: 20%;
        padding-right: 10px;
      }
      .time{
        width: 5%;
        padding: 0px 15px;
        color: #999;
      }
      &:nth-child(2n){
        background: white;
      }
      &:nth-child(2n+1){
        background: #fbfbfd;
      }
      &:first-child{
        color: #999;
        height: 50px;
        line-height: 50px;
      }
      &:nth-child(n+2){
        .song{
          .songName{
            &:hover{
              color: #31c27c;
              cursor: pointer;
            }
          }
        }
        .singer{
          >span{
            &:hover{
              color: #31c27c;
              cursor: pointer;
              >span{
                color: black;
              }
            }
          }

        }
        .album{
          &:hover{
            color: #31c27c;
            cursor: pointer;
          }
        }
      }
    }
  }
  .loading-more{
    height: 40px;
    line-height: 40px;
    text-align: center;
    width: 400px;
    margin: 10px auto;
    background: #31c27c;
    border-radius: 10px;
    color: white;
    font-size: 14px;
  }
}
</style>
